<template>
  <el-container>
    <el-header height="auto">
      <label class="title">{{type | orderListType}}</label>
      <el-row>
        <el-col :span="5">
          <my-input prefixDesc="工单编号" v-model="titleOrNum"></my-input>
        </el-col>
        <el-col :span="5">
          <my-select-customer v-model="erpCustomerId"></my-select-customer>
        </el-col>
        <el-col :span="5">
          <my-select-data-center v-model="dataCenter"></my-select-data-center>
        </el-col>
        <el-col :span="5">
          <my-select prefixDesc="优先级" v-model="level" :dataSource="levelList"></my-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <my-select prefixDesc="工单状态" v-model="workOrderStatus" :dataSource="orderStatusList"></my-select>
        </el-col>
        <el-col :span="5">
          <my-select prefixDesc="工单类型" v-model="workOrderType" :dataSource="orderTypeList"></my-select>
        </el-col>
        <el-col :span="10">
          <el-row class="el-row-item">
            <el-col :span="4" class="el-col-right">
              <label class="label-right">日期范围：</label>
            </el-col>
            <el-col :span="7">
              <el-date-picker
                style="width: 100%"
                v-model="acceptTime"
                size="small"
                value-format="yyyy-MM-dd"
                :picker-options="startPickOptions"
                type="date"
                placeholder="起始日期"
              ></el-date-picker>
            </el-col>
            <el-col :span="1" class="el-col-center">
              <label>至</label>
            </el-col>
            <el-col :span="7">
              <el-date-picker
                style="width: 100%"
                v-model="endTime"
                size="small"
                value-format="yyyy-MM-dd"
                :picker-options="endPickOptions"
                type="date"
                placeholder="截止日期"
              ></el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" class="el-col-left">
          <el-button type="primary" size="mini" @click="loadWorkOrderList(1)">搜索</el-button>
          <el-button type="info" size="mini" @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main v-loading="loading">
      <label class="title">工单列表</label>
      <el-table :data="workOrderList" size="mini" stripe>
        <el-table-column label="工单类型" align="center">
          <template slot-scope="scope">{{ scope.row.workOrderType | orderType }}</template>
        </el-table-column>
        <el-table-column prop="title" label="工单标题" align="center"></el-table-column>
        <el-table-column prop="workOrderNum" label="工单编号" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="datacenter" label="数据中心" align="center"></el-table-column>
        <el-table-column label="优先级" align="center">
          <template slot-scope="scope">{{ scope.row.level | orderLevel }}</template>
        </el-table-column>
        <el-table-column label="工单状态" align="center">
          <template
            slot-scope="scope"
          >{{ scope.row.workOrderStatus | workOrderStatus }} {{ scope.row.subStatus | subStatus }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="发起时间" align="center"></el-table-column>
        <el-table-column prop="curHandlerName" label="当前决策人" align="center"></el-table-column>
      </el-table>
    </el-main>
    <el-footer height="40px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPageNum"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      />
    </el-footer>
  </el-container>
</template>

<script>
import MySelectCustomer from '../../common/components/MySelectCustomer'
import MySelectDataCenter from '../../common/components/MySelectDataCenter'
import MySelect from '../../common/components/MySelect'
import MyInput from '../../common/components/MyInput'
import * as constant from '../../common/constant'
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'WorkOrderList',
  components: {
    MyInput,
    MySelect,
    MySelectCustomer,
    MySelectDataCenter
  },
  data() {
    return {
      type: this.$route.params.listType,
      currentPageNum: 1,
      currentPageSize: 10,
      startPickOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      endPickOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      levelList: constant.LEVEL_LIST,
      orderStatusList: constant.ORDER_STATUS_LIST,
      orderTypeList: constant.ORDER_TYPE_LIST
    }
  },
  computed: {
    ...mapState('workOrder', {
      searchParams: state => state.searchParams,
      workOrderList: state => state.workOrderList,
      loading: state => state.loading,
      totalCount: state => state.totalCount
    }),
    titleOrNum: {
      get: function() {
        return this.searchParams.titleOrNum
      },
      set: function(value) {
        this.SET_SEARCH_TITLEORNUM(value)
      }
    },
    erpCustomerId: {
      get: function() {
        return this.searchParams.erpCustomerId
      },
      set: function(value) {
        this.SET_SEARCH_CUSTOMER(value)
      }
    },
    dataCenter: {
      get: function() {
        return {
          datacenterid: this.searchParams.datacenterid,
          datacentername: this.searchParams.datacentername
        }
      },
      set: function(item) {
        this.SET_SEARCH_DATACENTER(item)
      }
    },
    level: {
      get: function() {
        return this.searchParams.level
      },
      set: function(id) {
        this.SET_SEARCH_LEVEL(id)
      }
    },
    workOrderStatus: {
      get: function() {
        return this.searchParams.workOrderStatus
      },
      set: function(id) {
        this.SET_SEARCH_WORKORDER_STATUS(id)
      }
    },
    workOrderType: {
      get: function() {
        return this.searchParams.workOrderType
      },
      set: function(id) {
        this.SET_SEARCH_WORKORDER_TYPE(id)
      }
    },
    acceptTime: {
      get: function() {
        return this.searchParams.acceptTime
      },
      set: function(value) {
        this.SET_SEARCH_ACCEPTTIME(value)
      }
    },
    endTime: {
      get: function() {
        return this.searchParams.endTime
      },
      set: function(value) {
        this.SET_SEARCH_ENDTIME(value)
      }
    }
  },
  methods: {
    ...mapMutations('workOrder', [
      'SWITCH_LIST_TYPE',
      'RESET_SEARCH_PARAMS',
      'SET_SEARCH_TITLEORNUM',
      'SET_SEARCH_CUSTOMER',
      'SET_SEARCH_DATACENTER',
      'SET_SEARCH_LEVEL',
      'SET_SEARCH_WORKORDER_STATUS',
      'SET_SEARCH_WORKORDER_TYPE',
      'SET_SEARCH_ACCEPTTIME',
      'SET_SEARCH_ENDTIME',
      'SET_PAGENUM',
      'SET_PAGESIZE'
    ]),
    ...mapActions('workOrder', ['getWorkOrderList']),
    loadWorkOrderList(pageNum, pageSize) {
      if (pageNum) this.SET_PAGENUM(pageNum)
      if (pageSize) this.SET_PAGESIZE(pageSize)
      this.getWorkOrderList()
    },
    resetSearch() {
      this.RESET_SEARCH_PARAMS()
      this.loadWorkOrderList()
    },
    handleSizeChange(pageSize) {
      this.currentPageNum = 1
      this.currentPageSize = pageSize
      this.loadWorkOrderList(this.currentPageNum, this.currentPageSize)
    },
    handleCurrentChange(pageNum) {
      this.loadWorkOrderList(pageNum)
    },
    init(listType) {
      this.RESET_SEARCH_PARAMS()
      this.SWITCH_LIST_TYPE(listType)
      this.loadWorkOrderList()
    }
  },
  watch: {
    $route(to) {
      this.init(to.params.listType)
    }
  },
  mounted() {
    this.init(this.$route.params.listType)
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  text-align: left;
  font-size: 14px;

  .el-header {
    padding: 0 0 20px;
    background-color: #fff;

    & > .el-row {
      margin-top: 16px;
    }

    .el-col-right {
      line-height: 32px;
      text-align: right;
    }

    .el-col-center {
      line-height: 32px;
      text-align: center;
    }
  }

  .el-main {
    padding: 0;
    margin-top: 16px;
    background-color: #fff;
  }

  .title {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  .el-footer {
    text-align: right;
    padding: 10px 0 0;
  }
}
</style>
